<template>
  <div>
    <div style="height: 40px">
      <h1>客服管理</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div id="shaixuan_2">

        <span id="input">
          <el-input v-model="input"
                    placeholder="输入客服昵称或账号"></el-input>
        </span>

        <div id="button">
          <el-button type="primary"
                     @click="find()">筛选</el-button>
          <el-popover placement="top"
                      width="450"
                      trigger="click"
                      v-model="visible">

            <div style="margin: 20px;"></div>
            <el-form :model="ruleForm"
                     status-icon
                     :rules="rules"
                     ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="客服昵称"
                            prop="name">
                <el-input v-model="ruleForm.name"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="客服账号"
                            prop="account">
                <el-input v-model="ruleForm.account"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注"
                            prop="remarks">
                <el-input v-model.number="ruleForm.remarks"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="submitForm()">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>

            <el-button slot="reference">新增客服</el-button>
          </el-popover>
        </div>

      </div>
    </div>
    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">成员列表</span>
      </div>

      <el-table :data="tableData"
                border
                style="width: 84.3%">
        <el-table-column prop=""
                         label="选择"
                         width="50"
                         align="center">
          <input type="checkbox">
        </el-table-column>
        <el-table-column prop="account"
                         label="账号"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column prop="name"
                         label="昵称"
                         width="150"
                         align="center">
        </el-table-column>
        <el-table-column label="启用状态"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date"
                         label="添加时间"
                         width="250"
                         align="center">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="400"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       size="medium"
                       @click="info(scope)">查看记录</el-button>
            <el-button type="text"
                       size="medium">编辑</el-button>
            <el-button type="text"
                       size="medium">删除</el-button>
            <el-button type="text"
                       size="medium">当前会话</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div id="all">
        <input type="checkbox"
               id="checkall">全选
      </div>
      <el-button type="danger"
                 id="delall"
                 size="mini">批量删除</el-button>
      <div id="page">
        <el-pagination background
                       layout="prev, pager, next"
                       :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerServiceManagement',
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('昵称不能为空'))
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
    }
    var checkRemarks = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('备注不能为空'))
      }
    }
    return {
      visible: false,
      ruleForm: {
        name: '',
        account: '',
        remarks: '',
      },
      rules: {
        name: [{ validator: validatePass, trigger: 'blur' }],
        account: [{ validator: validatePass2, trigger: 'blur' }],
        remarks: [{ validator: checkRemarks, trigger: 'blur' }],
      },
      labelPosition: 'left',
      input: '',
      value: true,
      tableData: [],
    }
  },
  methods: {
    submitForm: function () {
      this.$axios
        .post('http://localhost:9527/conversation/add', this.ruleForm)
        .then((res) => {
          ;(this.visible = false), this.created()
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    find: function () {
      this.$axios
        .get('http://localhost:9527/conversation/findByName?name=' + this.input)
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
        })
    },
    created() {
      this.$axios
        .get('http://localhost:9527/conversation/findAll')
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
        })
    },
    info: function (scope) {
      this.$router.push({
        name: 'Detail',
        query: { name: scope.row.name },
      })
    },
  },
  created() {
    this.created()
  },
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#one {
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
